<template>
<!-- 这是一个div拖动的例子，id为div1的拖动到div2的两个孩子div时，将显示名称赋值给拖到的目标上 -->
  <div>
    <span>DIV 拖动的例子</span>
    <div id="div1">
      <div class="floatball" id="floatball"
        @mousedown="down($event,1)"
        @mouseup="end($event,1)"
        @mousemove="move($event,1)"
        @touchstart.stop="down($event,2)"
        @touchmove.stop="move($event,2)"
        @touchend.stop="end($event,2)"
        :style="{top:position.y+'px', left:position.x+'px'}">
        奖励规则
      </div>
    </div>
    <div id="div2">
      <div class="floatball1" id="fffff1">12121221</div>
      <div class="floatball1" id="fffff2">222222</div>
    </div>
  </div>
  <!-- <div class="floatball" id="floatball" @mousedown="down" @touchstart.stop="down" @mousemove="move"
        @touchmove.stop="move" @mouseup="end" @touchend.stop="end" :style="{top:position.y+'px', left:position.x+'px'}">
        奖励规则
  </div> -->
</template>

<script>
// 鼠标位置和div的左上角位置 差值
var dx, dy
var screenWidth = window.screen.width
var screenHeight = window.screen.height
export default {
  name: 'Maindetail1',
  data () {
    return {
      flags: false,
      position: {
        x: 320,
        y: 60
      }
    }
  },
  computed: {
  },
  mounted () {
    let ss = document.getElementById('div2')
    var child = ss.firstElementChild
    while (child) {
      console.log('=============' + child.id + '==============')
      this.getPos(child)
      child = child.nextElementSibling
    }
    let e1 = document.getElementById('fffff1')
    console.log(e1.innerText)
    this.getPos(e1)
  },
  methods: {
    // 生命周期，mounted后面使用
    getPos (e1) {
      let str = 'L=' + e1.getBoundingClientRect().left + ',T=' + e1.getBoundingClientRect().top + ',w:' + e1.getBoundingClientRect().width + ',h=' + e1.getBoundingClientRect().height
      console.log('e1===========' + str)
      e1.innerText = str
    },
    isIn (element, x, y) {
      let y1 = element.getBoundingClientRect().top
      let x1 = element.getBoundingClientRect().left
      let w1 = element.getBoundingClientRect().width
      let h1 = element.getBoundingClientRect().height
      let ss = [element.id, x, y, x1, y1, w1, h1]
      console.log('opopop===' + ss)
      if ((x > x1) && x < (x1 + w1) && (y > y1) && (y < (y1 + h1))) {
        return true
      } else {
        return false
      }
    },
    findDiv (x, y) {
      let ss = document.getElementById('div2')
      var child = ss.firstElementChild
      while (child) {
        // console.log('=============' + child.id + '==============')
        if (this.isIn(child, x, y)) {
          return child
        }
        child = child.nextElementSibling
      }
      return null
    },
    // 实现移动端拖拽
    down (event, i) {
      console.log('down+++target=' + event.target.id + '+++currentTarget=' + event.currentTarget.id + '+++down++++++++++++++' + i)
      this.flags = true
      var touch
      if (event.touches) {
        touch = event.touches[0]
      } else {
        touch = event
      }
      console.log('鼠标点所在位置', touch.clientX, touch.clientY)
      console.log('div左上角位置', event.target.offsetTop, event.target.offsetLeft)
      dx = touch.clientX - event.target.offsetLeft
      dy = touch.clientY - event.target.offsetTop
    },
    move (event, i) {
      console.log('move+++target=' + event.target.id + '+++currentTarget=' + event.currentTarget.id + '+++move++++++++++++++' + i)
      if (this.flags) {
        var touch
        if (event.touches) {
          touch = event.touches[0]
        } else {
          touch = event
        }
        // 定位滑块的位置
        this.position.x = touch.clientX - dx
        this.position.y = touch.clientY - dy
        // 限制滑块超出页面
        // console.log('屏幕大小', screenWidth, screenHeight )
        if (this.position.x < 0) {
          this.position.x = 0
        } else if (this.position.x > screenWidth - touch.target.clientWidth) {
          this.position.x = screenWidth - touch.target.clientWidth
        }
        if (this.position.y < 0) {
          this.position.y = 0
        } else if (this.position.y > screenHeight - touch.target.clientHeight) {
          this.position.y = screenHeight - touch.target.clientHeight
        }
        // 阻止页面的滑动默认事件
        document.addEventListener('touchmove', function () {
          event.preventDefault()
        }, false)
      }
    },
    // 鼠标释放时候的函数
    end (event, i) {
      console.log('end+++target=' + event.target.id + '+++currentTarget=' + event.currentTarget.id + '+++end++++++++++++++' + i)
      console.log('end')
      console.log('move+++target=' + event.target.id + '+++currentTarget=' + event.currentTarget.id + '+++move++++++++++++++' + i)
      let ee = event.currentTarget
      let ss = Math.floor(ee.getBoundingClientRect().left) + ',' + Math.floor(ee.getBoundingClientRect().top)
      ee.innerText = ss
      var aa = this.findDiv(ee.getBoundingClientRect().left, ee.getBoundingClientRect().top)
      if (aa === null) {
      } else {
        console.log('aaaa===' + aa.id)
        aa.innerText = ee.innerText
      }
      this.flags = false
    }
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.floatball {
    color: white;
    height: 50px;
    width: 50px;
    padding: 5px;
    z-index: 990;
    font-display: center;
    position: fixed;
    /* position: relative; */
    top: 60px;
    right: 320px;
    border-radius: 50%;
    background-color: rgba(29, 157, 237, 0.8);
}

.floatball1 {
    color: white;
    height: 150px;
    width: 150px;
    padding: 5px;
    z-index: 990;
    /* position:relative; */
    font-size: 10px;
    border-radius: 50%;
    background-color: rgba(29, 157, 237, 0.8);
}
</style>
